<template>
  <div class="cart" v-for="item in cartlist" :key="item.id" :data-id="item.id">
    <van-swipe-cell>
      <van-card
        :num="item.acount"
        :price="(item.price * item.acount).toFixed(2)"
        :desc="item.desc"
        :title="item.title"
        :thumb="item.imgurl"
        @click-thumb="godetails(item.shopid)"
      >
        <template #thumb>
          <van-checkbox
            :model-value="item.checked.length == 4 ? true : false"
            @click.prevent.stop="selectFn(item.shopid, item.checked)"
            style="margin-right: 10px"
          ></van-checkbox>
          <img :src="item.imgurl" style="width: 80px; height: 120px" alt="" />
        </template>
        <template #bottom>
          <van-stepper
            v-model="item.acount"
            theme="round"
            button-size="22"
            :disable-input="true"
            integer
            style="position: absolute; left: 140px"
            @plus="addorder(item.acount, item.id)"
            @minus="deleteorder(item.acount, item.id)"
          />
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="deleteshop(item.id)"
        />
      </template>
    </van-swipe-cell>
    <!-- 提交商品 -->
    <van-submit-bar
      :price="prcie * 100"
      button-text="提交订单"
      @submit="onSubmit"
      style="margin-bottom: 50px"
    >
      <van-checkbox v-model="checked" @click="orderchecked(checked)"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>

  <van-empty v-if="cartlist.length==0" description="购物车空空如也!!!" />
</template>
<script>
import request from "@/utils/request";
import router from "@/router";
import { showNotify, closeNotify } from "vant";
import { showToast } from "vant";
export default {
  name: "cart",
  data() {
    return {
      cartlist: [],
      checked: false,
      // 已经勾选了的商品数据
      shopdaralist: [],
      prcie: 0,
    };
  },
  async created() {
    const result = await request.get("/good/getcartdata");
    if (result.data.code === 200) {
      this.cartlist = result.data.cartdata;
    }
    // 获取已经勾选了的商品数据
    const result1 = await request.get("/good/shopdata");
    if (result.data.code === 200) {
      this.shopdaralist = result1.data.shopdaralist;
    }
  },
  // 更新生命周期阶段
  async updated() {
    const result = await request.get("/good/getcartdata");
    const ischecked = result.data.cartdata.every(
      (item) => item.checked === "true"
    );
    if (ischecked) {
      this.checked = true;
    } else {
      this.checked = false;
    }
    // 更新阶段从新获取新的数据
    // 获取已经勾选了的商品数据
    const result1 = await request.get("/good/shopdata");
    if (result1.data.code === 200) {
      this.shopdaralist = result1.data.shopdaralist;
    }
    this.prcie = this.shopdaralist.reduce(
      (total, item) => (total += Number(item.price) * Number(item.acount)),
      0
    );
  },
  computed: {},
  methods: {
    // 更新数据
    async updateCartData() {
      const result = await request.get("/good/getcartdata");
      if (result.data.code === 200) {
        this.cartlist = result.data.cartdata;
      }
    },
    // 跳转详情页
    godetails(id) {
      router.push({ path: "/details", query: { categoryid: id } });
    },
    // 更改选中状态
    async selectFn(id, checked) {
      await request.get(`/good/updatecart?shopid=${id}&checked=${checked}`);
      this.updateCartData();
    },
    // 全选
    async orderchecked(checked) {
      await request.get("/good/allcart?checked=" + checked);
      this.updateCartData();
    },

    // 提交订单
    async onSubmit() {
      const result = await request.get("/good/shopdata");
      if (result.data.shopdaralist.length == 0) {
        // 3 秒后自动关闭
        showNotify("请至少勾选一件商品!");
        return;
      }
      router.push({ path: "/sborder" });
    },

    // 删除指定的订单数据
    async deleteshop(id) {
      await request.get("/good/deleteorder?id=" + id);
      this.updateCartData();
      showToast("删除成功!");
    },
    // 增加商品数目
    async addorder(acount, id) {
      await request.get(`/good/addordersum?id=${id}&acount=${+acount + 1}`);
      this.updateCartData();
    },
    // 减少商品数目
    async deleteorder(acount, id) {
      await request.get(`/good/deleteordersum?id=${id}&acount=${acount - 1}`);
      this.updateCartData();
    },
  },
};
</script>
<style lang="scss">
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-card__price {
  color: red;
}
.van-stepper--round .van-stepper__plus {
  background-color: red;
}
.van-stepper--round .van-stepper__minus {
  color: red;
  border: 1px solid red;
}
.van-card__thumb {
  display: flex;
  width: 120px;
}
.van-stepper {
  width: 100px;
}
</style>
